<template>
  <div class="lee-local" :style="rootStyle">
    <div ref="box" class="animated lee-local-box">
      <h1 class="title">
        <span>与我</span><span>联系</span>
      </h1>
      <p class="tags">
        <strong class="tags-orange">灵感</strong>
        <strong class="tags-green">代码</strong>
        <strong class="tags-blue">梦想</strong>
        <strong class="tags-brown">未来</strong>
      </p>
      <div class="content">
        <p>学习是一个充实愉悦的过程</p>
        <p>喜欢尝试，期待新鲜事物</p>
        <p>前端即兴趣，兴趣即未来</p>
        <p>行路有良友，便是捷径</p>
        <p>期待有机会与您共事！</p>
      </div>

      <div class="btns">
        <a href="javascript:;" class="lee-local-btn">
          <img :src="$store.state.asset.images.IconWechat" alt="wechat">
          <div class="lee-local-btn-tip">
            <img :src="$store.state.asset.images.QRCodeWechat" alt="wechat">
          </div>
        </a>
        <a href="javascript:;" class="lee-local-btn">
          <img :src="$store.state.asset.images.IconQQ" alt="qq">
          <div class="lee-local-btn-tip">
            <img :src="$store.state.asset.images.QRCodeQQ" alt="qq">
          </div>
        </a>
        <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=OFRRQFFZV1BNUQoICQF4SUkWW1dV" class="lee-local-btn">
          <img :src="$store.state.asset.images.IconEmail" alt="wechat">
        </a>
      </div>
    </div>

    <div class="lee-local-copyright">
      <div style="margin-right: 10px">
        <span>总访问量：</span>
        <span>{{ $store.state.countor.all }}</span>
        <span>今日访问量：</span>
        <span>{{ $store.state.countor.today }}</span>
      </div>
      <div>
        <span>© 橙续缘 |</span> 
        <a href="http://www.beian.gov.cn">&nbsp;粤ICP备18083394号</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeeSectionFour',
  computed: {
    rootStyle() {
      const img = this.$store.state.asset.images.BgImg3;
      return `background-image: url(${img})`;
    },
  },
  methods: {
    async onShow({ elm }) {
      if (elm !== this.$el) {
        this.$refs.box.classList.add('zoomOut');
        this.$refs.box.classList.remove('zoomIn');
      } else {
        this.$refs.box.classList.add('zoomIn');
        this.$refs.box.classList.remove('zoomOut');
      }
    },
  },
  async mounted() {
    this.$evts.on('fullpage#scroll', this.onShow);
  },
};
</script>

<style lang="less" scoped>
.lee-local {
  @theme-color: #33ccff;

  filter: brightness(.6);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  &-box {
    @w: 450/16em;
    width: @w;
    min-height: @w;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    filter: none;

    &::before {
      content: '';
      top: 0;
      right: 0;
      width: 156/16em;
      height: 106/16em;
      position: absolute;
      box-sizing: border-box;
      border-top: 6/16em solid @theme-color;
      border-right: 6/16em solid @theme-color;
    }

    &::after {
      content: '';
      left: 0;
      bottom: 0;
      width: @w;
      height: 36/16em;
      position: absolute;
      box-sizing: border-box;
      border-left: 6/16em solid @theme-color;
      border-right: 6/16em solid @theme-color;
      border-bottom: 6/16em solid @theme-color;
    }

    .title {
      line-height: 70px;
      font-size: 40/16em;
      min-width: 350px;
      text-align: center;
      border-bottom: 1px solid @theme-color;
      margin: 0;

      span:first-child {
        color: @theme-color;
      }
      span:last-child {
        color: #fff;
      }
    }

    .tags {
      color: #fff;
      font-size: 24/16em;
      text-shadow: #fff 0 0 2px,#fff 0 0 5px,#fff 0 0 10px,
      #fff 0 0 10px,#fff 0 0 20px,#fff 0 0 20px,black 0 0 1px;
      margin: 15px 0 0;

      strong {
        padding: 0 15px;
      }

      &-orange {
        text-shadow: #e3723c 0 0 2px,#e3723c 0 0 5px,#e3723c 0 0 10px,
        #e3723c 0 0 10px,#e3723c 0 0 20px,#e3723c 0 0 20px,black 0 0 1px;
      }

      &-green {
        text-shadow: #84c800 0 0 2px,#84c800 0 0 5px,#84c800 0 0 10px,
        #84c800 0 0 10px,#84c800 0 0 20px,#84c800 0 0 20px,black 0 0 1px;
      }

      &-blue {
        text-shadow: #33ccff 0 0 2px,#33ccff 0 0 5px,#33ccff 0 0 10px,
        #33ccff 0 0 10px,#33ccff 0 0 20px,#33ccff 0 0 20px,black 0 0 1px;
      }

      &-brown {
        text-shadow: #9e966e 0 0 2px,#9e966e 0 0 5px,#9e966e 0 0 10px,
        #9e966e 0 0 10px,#9e966e 0 0 20px,#9e966e 0 0 20px,black 0 0 1px;
      }
    }

    .content {
      color: #fff;
      text-align: center;
      margin: 15px 0 0;
      font-size: 18/16em;
      p {
        margin: 15px 0 0;
      }
    }

    .btns {
      margin: 20px 0 0;
    }
  }

  &-btn {
    @w: 40/16em;
    width: @w;
    height: @w;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 15px;
    color: #fff;
    text-decoration: none;

    &::before {
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 12px;
      background-color: #414141;
      transform: rotate(45deg);
      z-index: -1;
      box-shadow: 0 0 1px #eee;
      transition: all .5s ease;
    }

    &:hover::before {
      background-color: @theme-color;
    }

    img {
      @s: 16/16em;
      width: @s;
      height: @s;
    }

    &-tip {
      top: 0;
      @w: 160/16em;
      min-width: @w;
      padding: 10px;
      background-color: #fff;
      position: absolute;
      border-radius: 6px;
      border: 1px solid @theme-color;
      opacity: 0;
      transition: all .5s;
      visibility: hidden;
      transform: translateY(calc(~"-100% - 60px"));

      &::after {
        content: '';
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid @theme-color;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 100%);
      }

      img {
        width: 100%;
        height: auto;
      }
    }

    &:hover &-tip {
      opacity: 1;
      visibility: visible;
      transform: translateY(calc(~"-100% - 20px"));
    }
  }

  &-copyright {
    color: #fff;
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;

    a {
      color: #fff;
      text-decoration: none;
    }
  }
}
</style>
